!<template>
  <div id="main" style="height: 100%;width: 100%;">rank</div>
</template>

<script>
import * as echarts from "echarts";
import { getRankingSellNum } from "@/api/sale";

export default {
  name: "Commodityrank",

  data() {
    return {
      echarts: null,
      dataList: [],
      xlist: [],
      option: null
    };
  },
  mounted() {
    this.echartsInit();
  },

  methods: {
    getData() {
      const that = this;
      const res = getRankingSellNum();
      that.xlist = [];
      that.dataList = [];
      res.then(rep => {
        for (const key in rep.data) {
          if (rep.data.hasOwnProperty(key)) {
            const element = rep.data[key];
            that.xlist.push(element.commodityName);
            that.dataList.push({
              value: element.sumSellPrice,
              name: element.commodityName,
              sellNum: element.sellNum
            });
          }
        }
        let option = {
          title: {
            text: "本月热销商品排行"
          },
          legend: {},
          tooltip: {
            formatter: function(arg) {
              // console.log(arg)
              return arg.data.name + "（销售额：" + arg.data.sellNum + "元）";
            }
          },
          xAxis: {
            data: that.xlist
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              realtimeSort: true,
              label: {
                show: true,
                position: "top",
                valueAnimation: true
              },
              type: "bar",
              data: that.dataList
            }
          ]
        };
        that.echarts.setOption(option);
      });
    },
    echartsUpdate() {
      this.echarts.setOption(this.option);
    },
    echartsInit() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById("main"));
      this.getData();
      //   setInterval(() => {
      //     this.echartsUpdate();
      //   }, 3000);

      // 绘制图表;
      window.onresize = function() {
        this.echarts.resize();
      };
    }
  }
};
</script>

<style lang="scss" scoped>
</style>